<template>
  <!-- 外层容器，设置背景图和居中显示 -->
  <div class="wapper">
    <!-- 卡片组件，设置最大宽度为 480px -->
    <el-card style="max-width: 480px">
      <!-- 表单组件，绑定 formData 对象，设置标签宽度为自动，引用 form1Ref，添加验证规则 -->
      <el-form :model="formData" label-width="auto" style="max-width: 600px" ref="form1Ref" :rules="rules">
        <!-- 电话输入框，绑定 formData.tel，设置验证规则 -->
        <el-form-item label="电话" prop="tel">
          <el-input v-model="formData.tel" />
        </el-form-item>
        <!-- 验证码输入框，绑定 formData.code，设置验证规则，右侧附加一个按钮，点击时调用 sendCode 方法发送验证码 -->
        <el-form-item label="验证码" prop="code">
          <el-input v-model="formData.code">
            <template #append>
              <el-button type="primary" style="background-color: green; color: #fff;" @click="sendCode">发送验证码</el-button>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码输入框，绑定 formData.password，设置验证规则，类型为 password，显示密码图标 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" type="password" show-password />
        </el-form-item>
        <!-- 验证密码输入框，绑定 formData.password2，设置验证规则，类型为 password，显示密码图标 -->
        <el-form-item label="验证密码" prop="password2">
          <el-input v-model="formData.password2" type="password" show-password />
        </el-form-item>
        <!-- 邮箱输入框，绑定 formData.email，设置验证规则 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <!-- 昵称输入框，绑定 formData.nickName，设置验证规则 -->
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="formData.nickName" />
        </el-form-item>
        <!-- 提交和重置按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 卡片底部，提供已有账号去登录的链接 -->
      <template #footer>
        <el-button link type="primary" @click="login">已有账号？去登录</el-button>
      </template>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { userApi } from '@/api';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Md5 } from 'ts-md5';

// 获取当前页面的信息
const route = useRoute();
// 负责页面跳转
const router = useRouter();

// 跳转到登录页面
const login = () => {
  router.push({ name: "user.login" });
}

// 表单引用
const form1Ref = ref();

// 表单数据对象
const formData = reactive({
  tel: '17613127270',
  code: '',
  email: "1023318991@qq.com",
  password: "123456lK",
  password2: "123456lK",
  nickName: "luck",
});

// 表单验证规则
const rules = {
  tel: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号不正确', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: "email", message: '邮箱格式不正确', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合，长度在8-10之间', trigger: 'blur' },
  ],
  password2: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/, message: '必须包含大小写字母和数字的组合，长度在8-10之间', trigger: 'blur' },
  ],
  nickName: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
  ],
};

// 提交表单的方法
const submit = () => {
  if (formData.password !== formData.password2) {
    ElMessage({
      message: '两次密码不一致',
      type: 'error',
    });
    return;
  }
  const md5Pwd = Md5.hashStr(formData.password).toUpperCase();
  formData.password2 = "";
  userApi.register.call({ ...formData, password: md5Pwd }).then(() => {
    ElMessage({
      message: '注册成功',
      type: 'success',
    });
  });
}

// 发送验证码的方法
const sendCode = () => {
  userApi.sendCode.call({ tel: formData.tel }).then(() => {
    ElMessage({
      message: '验证码发送成功.',
      type: 'success',
    });
  });
}

// 提交表单的异步方法
const submitForm = async () => {
  await form1Ref.value.validate((valid: any, fields: any) => {
    if (valid) {
      submit();
    }
  });
}

// 重置表单的方法
const resetForm = () => {
  form1Ref.value.resetFields();
}
</script>
<style scoped>
.wapper {
    background: url('/1.png');
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

</style>